<!DOCTYPE html>

<head>
    <title>波浪</title>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        section{
            color: #35d4da;
        }

        .waveBox {
            width: 500px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .waveBox canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        #myCanvas1 {
            z-index: 1;
        }

        #myCanvas2 {
            z-index: 2;
        }
    </style>
</head>

<body>
    <div class="waveBox">
        <canvas id="myCanvas1" height="200">Your browser does not support the HTML5 canvas tag.</canvas>
        <canvas id="myCanvas2" height="200">Your browser does not support the HTML5 canvas tag.</canvas>
    </div>


    <script>
        function resize() {
            var canvas1 = document.getElementById('myCanvas1');
            canvas1.width = window.innerWidth;
            var canvas2 = document.getElementById('myCanvas2');
            canvas2.width = window.innerWidth;
        }
        window.onresize = function () {
            resize();
        }
        resize();
        ; (function () {

            wave1();
            wave2();

        })();
        /* 第一条 */
        function wave1() {
            var waveWidth = 3300,
                offset = 0,
                waveHeight = 30,  //波浪高度
                waveCount = 6,  //波浪个数
                startX = -1000,
                startY = 200,   //canvas 高度
                progress = 110,  //波浪位置的高度
                d2 = waveWidth / waveCount,
                d = d2 / 2,
                hd = d / 2,
                c = document.getElementById("myCanvas1"),
                ctx = c.getContext("2d");
            function tick() {
                offset -= 5;
                if (-1 * offset === d2) offset = 0;
                ctx.clearRect(0, 0, c.width, c.height);
                ctx.fillStyle = '#a7eff1';
                ctx.beginPath();
                var offsetY = startY - progress;
                ctx.moveTo(startX - offset, offsetY);
                for (var i = 0; i < waveCount; i++) {
                    var dx = i * d2;
                    var offsetX = dx + startX - offset;
                    ctx.quadraticCurveTo(offsetX + hd, offsetY + waveHeight, offsetX + d, offsetY);
                    ctx.quadraticCurveTo(offsetX + hd + d, offsetY - waveHeight, offsetX + d2, offsetY);
                }
                ctx.lineTo(startX + waveWidth, 3000);
                ctx.lineTo(startX, 3000);
                ctx.fill();

                setTimeout(tick, 1500 / 60);    //速度
                //requestAnimationFrame(tick);
            }
            tick();
        }
        /* 第二条 */
        function wave2() {
            var waveWidthB = 3300,
                offsetB = 0,
                waveHeightB =60,  //波浪高度
                waveCountB = 4,  //波浪个数
                startXB = -1000,
                startYB = 200,   //canvas 高度
                progressB = 90,  //波浪位置的高度
                d2B = waveWidthB / waveCountB,
                dB = d2B / 2,
                hdB = dB / 2,
                cB = document.getElementById("myCanvas2"),
                ctxB = cB.getContext("2d");
            function tickB() {
                offsetB -= 5;
                if (-1 * offsetB === d2B) offsetB = 0;
                ctxB.clearRect(0, 0, cB.width, cB.height);
                ctxB.fillStyle = '#35d4da';
                ctxB.beginPath();
                var offsetYB = startYB - progressB;
                ctxB.moveTo(startXB - offsetB, offsetYB);
                for (var i = 0; i < waveCountB; i++) {
                    var dxB = i * d2B;
                    var offsetXB = dxB + startXB - offsetB;
                    ctxB.quadraticCurveTo(offsetXB + hdB, offsetYB + waveHeightB, offsetXB + dB, offsetYB);
                    ctxB.quadraticCurveTo(offsetXB + hdB + dB, offsetYB - waveHeightB, offsetXB + d2B, offsetYB);
                }
                ctxB.lineTo(startXB + waveWidthB, 3000);
                ctxB.lineTo(startXB, 3000);
                ctxB.fill();

                setTimeout(tickB, 5000 / 60); //速度
                //requestAnimationFrame(tick);
            }
            tickB();
        }

    </script>
</body>

</html>